<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>使用传统的form提交请求数据</h3>
		<form action="http://127.0.0.1:8080/v2/user/login" method="get">
			用户名：<input type="text" name="uname"><br>
			密码：<input type="text" name="upwd"> <br>
			<input type="submit" value="登录">
		</form>
		
		<hr>
		<h3>使用ajax提交请求数据</h3>
		用户名：<input type="text" id="inputUname"><br>
		密码：<input type="text" id="inputUpwd"> <br>
		<input type="button" value="登录" id="btnLogin">
		<h4 id="msg">登录中...</h4>
		
		<script>
			btnLogin.onclick = function(){
				//收集用户的输入
				let n = inputUname.value
				let p = inputUpwd.value
				let url = 'http://127.0.0.1:8080/v2/user/login?uname='+n+'&upwd='+p
				
				let xhr = new XMLHttpRequest()
				xhr.open('get', url)
				xhr.send()
				console.log(1)
				xhr.onload = function(){
					console.log(2)
					console.log(xhr.responseText)
					msg.innerHTML = xhr.responseText
				}
				console.log(3)
			}
		</script>
	</body>   
</html>
